<template>
    <div id="order-echarts" style="width: 80%;height: 100%;">

    </div>
</template>

<script>
import * as echarts from 'echarts';
import { onMounted, reactive, toRefs } from 'vue';
import axios from 'axios';
import { getSessionStorage } from '../common';

export default {

    setup(){

        const state = reactive({
            data: [],
            HpArr: [],
            OrderArr: []
        })


        function initEcharts(name,value){
            let chartDom = document.getElementById('order-echarts');
            let myChart = echarts.init(chartDom);
            let option;

            option = {

            title: {
                text: '医院订单对比',
                left: 'center'
            },
            xAxis: {
                type: 'category',
                data: state.HpArr
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                data: state.OrderArr,
                type: 'bar'
                }
            ]
            };

            option && myChart.setOption(option);
        }

        function initOrderZhu(){
            axios.post('/api/countOrderForHp',{
                    headers: {
                        'token': getSessionStorage("token")
                    }
                    })
                    .then(function (response) {
                        console.log(response.data.data);
                        state.data = response.data.data
                        state.data.forEach(item => {
                            state.HpArr.push(item.name)
                            state.OrderArr.push(item.value)
                        });
                        
                        initEcharts(state.HpArr,state.OrderArr)
                    })
                    .catch(function (error) {
                    console.log(error);
                    })
        }


        onMounted(() => {
            initOrderZhu();
            initEcharts();
        });

        return{
            ...toRefs(state),
            initEcharts
        }        
    }

}
</script>

<style>

</style>